<template>
	<view>
		<view class="list">
			<view class="item tp-w690">
				<view class="l-wrap">
					<view class="price"><text style="font-size: 32rpx;">￥</text>{{dateInfo.amount}}</view>
					<view class="tip" v-if="dateInfo.useScene==1">满{{dateInfo.fullAmount}}-{{dateInfo.discount}}</view>
					<view class="btn" v-if="dateInfo.status == 0" @click="handleGetCoupon(dateInfo.id,dateInfo.couponType)">立即领取</view>
					<view class="btn" v-if="dateInfo.status == 1" @click="showToast(1)">已领取</view>
					<view class="btn" v-if="dateInfo.status == 2" @click="showToast(2,dateInfo.beginTime)">未开始</view>
				</view>
				<view class="r-wrap">
					<view class="other-wrap" v-if="false">
						<image class="icon" :src="require('../../pagesTravel/static/merchant-icon.png')" mode=""></image>
						<view class="txt">{{dateInfo.couponName}}</view>
					</view>
					<view class="name">{{dateInfo.couponName}}</view>
					<view class="date">有效期：{{dateInfo.beginTime}} — {{dateInfo.endTime}}</view>
					<view class="date useof">使用范围：{{dateInfo.bound}}</view>
					<view class="tp-mt10">
						使用商家： {{dateInfo.shopName}}
					</view>
				</view>
				
				<uni-icons class="help-icon" type="help" size="20" color="#FFAF3C"  @click="handleGoCouponDetail(dateInfo.content)"></uni-icons>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			dateInfo: {
				type: Object,
				default() {
					return {}
				}
			},
		},
		data() {
			return {
				
			};
		},
		methods: {
			handleGoCouponDetail(content) { // 跳转到优惠券说明
				uni.navigateTo({
					url: '/pagesSecond/scenic/scenicTxt?name=优惠券说明&content=' + encodeURIComponent(JSON.stringify(content))
				});
			},
			handleGetCoupon(id,type) { 	 // 优惠券类型 2.交通 3.景区 4.酒店 5.购物
				let url = ''  // 普通
				if(type == 2) {
					url = this.$api.receiveCoupon + '?id=' + id
				} else 	if(type == 3) {
					url = this.$api.scenicLqyh +  '?jqCouponId=' + id
				} else 	if(type == 4) {
					url = this.$api.takeHotelCoupon + '?hotelCouponId=' + id
				} else 	if(type == 5) {
					url = this.$api.shop_details_2 + '?id=' + id
				}
				this.$http.get(url).then(res => {
					if (res.code === 200) {
						uni.showToast({title: '领取成功'})
						uni.$emit('getCopponSuccess',  this.dateInfo)
					}
				})
			},
			// 显示提示
			showToast(status,time){
				uni.showToast({
					title: status == 1?'这个优惠券次数领完了':time+'过后才可以领取',
					icon:"none"
				})
				}
		}
	}
</script>

<style lang="scss" scoped>
.list {
	.item {
		margin-top: 20rpx;
		display: flex;
		background-color: #fff;
		position: relative;
		&::before,&::after {
			content: '';
			position: absolute;
			top: 50%;
			transform: translateY(-50%);
			width: 20rpx;
			height: 20rpx;
			border-radius: 50%;
			background-color: #f5f5f5;
		}
		&::before {
			left: -10rpx;
		}
		&::after {
			right: -10rpx;
		}
		.help-icon {
			position: absolute;
			right: 20rpx;
			top: 20rpx;
			z-index: 1;
		}
		.l-wrap {
			display: flex;
			align-items: center;
			flex-direction: column;
			padding: 40rpx 0;
			justify-content: space-between;
			background-color: #FF660A;
			color: #fff;
			margin-right: 39rpx;
			width: 200rpx;
			.price {
				font-size: 48rpx;
				font-weight: 500;
				line-height: 1;
			}
			.tip {
				font-size: 24rpx;
				margin-top: 24rpx;
			}
			.btn {
				width:160rpx;
				height:48rpx;
				line-height: 48rpx;
				text-align: center;
				border:1px solid #fff;
				border-radius:24rpx;
				color: #fff;
				margin-top: 38rpx;
			}
		}
		.r-wrap {
			display: flex;
			flex-direction: column;
			.other-wrap {
				display: flex;
				align-items: center;
				font-size: 24rpx;
				font-weight: 500;
				margin: 42rpx 0 22rpx;
				.icon {
					margin-right: 14rpx;
					height: 27rpx;
					width: 27rpx;
				}
			}
			.name {
				font-size: 28rpx;
				font-weight: 500;
				margin-top: 30rpx;
				line-height: 1;
			}
			.date {
				font-size: 22rpx;
				color: #666;
				margin: 20rpx 0 0;
				line-height: 1;
				&.useof {
					margin-top: 30rpx;
					line-height: 36rpx;
				}
			}
			.btn {
				width:160rpx;
				height:48rpx;
				line-height: 48rpx;
				text-align: center;
				border:1px solid $red;
				border-radius:24rpx;
				color: $red;
			}
		}
	}
}
</style>
